<template>
  <div class="talk-page" v-if="talkList.length">
    <div class="talk-text">
      <!-- <p class="tip">当前总共拓客展出{{ level }}层、{{ total-1 }}位客户</p> -->
      <p class="tip">当前总共拓客展出{{ level }}层、{{ customerCount }}位客户</p>
    </div>
    <div class="talk-list" ref="talkList">
      <div class="talk-item" v-for="(item, index) in talkList" :key="index" :style="item[0] ? item[0].style : {}">
        <area-box  v-for="(list, int) in item" :key="list.id" :itemData="list" @click.native="handleClick(item, index, int)" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import areaBox from './areaBox';
import data from './data.json'
import userInfoApi from '@/services/userService';
export default {
  data:()=>({
    array: {},
    talkList: [],
    level: 0,
    total: 0,
    customerCount:  ' '
  }),
  components: {
    areaBox
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    let params = { 
      agentId: this.userInfo.agentId || '',
      enterpriseId: this.userInfo. enterpriseId
    }
    userInfoApi.queryAllCustomerCount().then(res => {
      if (res) {
        this.customerCount = res.num
      }
    })
    userInfoApi.getTopologicalRlt(params).then(res => {
      let talk = res[0]
      this.recursion(res)
      const talkList = [[talk]]
      let savaData = this.setdataCustom(talk, talkList)
      talkList[0][0].active = true
      if (savaData) {
        talkList[0][0].isMoveLine = true
        talkList[1][0].active = true
        this.setdataCustom(savaData, talkList)
      }
      if (talkList.length > 2) {
        talkList[1][0].isMoveLine = true
      }
      this.talkList = talkList
    })
  },
  methods: {
    recursion(data) {
      data.forEach(item => {
        item.isMoveLine = false
        item.active = false
        this.total+=1
        if (item.level > this.level) {
          this.level = item.level
        }
        if (item.children && item.children.length) {
          this.recursion(item.children)
        } else {
          item.children = []
        }
      })
    },
    handleClick(item, index, int) {
      let ev = event
      let target = ev.target || ev.srcElement
      if (target.className !== 'image') return false
      let current = item[int]
      // if (!current.children.length)  return false
      let parent = this.upTo(target, 'area-box')
      let client = parent.getBoundingClientRect()
      let offset = this.upTo(parent, 'talk-item').getBoundingClientRect()
      client.custom = client.y - offset.y
      item.forEach(list => {
        list.isMoveLine = false
        list.active = false
      })
      if ((this.talkList.length - 1) > index) {
        // console.log("切换")
        this.talkList.splice(index+1, this.talkList.length)
        this.setdataCustom(current, this.talkList, client)
      } else {
        // console.log("新增")
        this.setdataCustom(current, this.talkList, client)
      }
      this.scrollTo()
    },
    scrollTo() {
      setTimeout(() => {
        let el = this.$refs.talkList
        let scrollTop = el.scrollTop
        let scrollWidth = el.scrollWidth
        el.scrollTo(scrollWidth, scrollTop)
      }, 0)
    },
    upTo(el, tagName) {
      tagName = tagName.toLowerCase();
      while (el && el.parentNode) {
        el = el.parentNode;
        if (el.tagName && el.className.toLowerCase() == tagName) {
          return el;
        }
      }
      return null;
    },
    setdataCustom(talk, talkList, client) {
      let savaData = null
      talk.active = true
      if (talk.children && talk.children.length) {
        talk.isMoveLine = true
        talk.children.forEach((item, index) => {
          item.isMoveLine = false
          item.active = false
          if (client) {
            let custom = client.custom > 0 ? client.custom : 0
            item.style = {
              // position: 'absolute',
              // left: (client.x + client.width ) + 'px',
              // top: client.y + 'px'
              'paddin-left': '0px',
              'padding-top': custom + 'px'
            }
          } else {
            item.style = { }
          }
          if (!index) {
            savaData = item
            if (talk.children.length === 1) {
              item.vertical = ""
              item.horizontal = "L"
            } else {
              item.vertical = "B"
              item.horizontal = "L"
            }
          } else if ( index === talk.children.length -1 ) {
            item.vertical = "T"
            item.horizontal = "L"
          } else {
            item.vertical = "TB"
            item.horizontal = "L"
          }
        })
        talkList.push(talk.children)
      } else {
        talk.isMoveLine = false
      }
      return savaData
    }
  } 
}
</script>

<style lang="less">

@color-bleak: #333;
@color-gray: #666;

.talk-page{
  width:100%;
  height:100%;
  .talk-text {
    padding: 16px;
    padding-bottom: 0px;
    // h3 {
    //   font-size: 28px;
    //   padding-top: 16px;
    //   color: @color-bleak;
    // }
    .tip {
      font-size: 14px;
      padding-top: 6px;
      color: @color-gray
    }
  }

  .talk-list {
    width: 100%;
    height: calc(100% - 38px);
    display: flex;
    overflow: auto;
    .talk-item {
      width: 108px;
      height: auto;
      // padding-bottom: 10px;
    }
  }
  
}
</style>
